<template>
  <view>
    <view class="search-box">
      <uni-search-bar
        class="uni-mt-10"
        v-model="searchValue"
        :focus="true"
        radius="55"
        placeholder="在此搜索"
        bgColor="#fff"
        maxlength="20"
        cancelButton="none"
        @input="getSearch"
      ></uni-search-bar>
    </view>
    <!-- 搜索结果列表 -->
    <block v-if="searchValue">
      <view
        class="search-list"
        v-for="(item, index) in searchList"
        :key="index"
        @click="goJump(item)"
      >
        <view class="search-list-title">{{ item.goods_name }}</view>
        <uni-icons
          class="search-list-icon"
          type="forward"
          size="16"
        ></uni-icons>
      </view>
    </block>
    <!-- 搜索历史 -->
    <block v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash" size="20" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag
          class="history-list-tag"
          :text="item"
          v-for="(item, index) in historyList"
          :key="index"
          :inverted="true"
          @click="goHistoryJump(item)"
        ></uni-tag>
      </view>
    </block>
  </view>
</template>

<script>
import { debounce } from 'lodash'
export default {
  data() {
    return {
      searchValue: '',
      searchList: [],
      historyList: JSON.parse(uni.getStorageSync('historyList') || '[]')
    }
  },
  methods: {
    //getSearch查询结果
    getSearch: debounce(async function(res) {
      if (!res.trim()) {
        this.searchList = []
        return
      }
      try {
        const { data } = await uni.$http.get(`/api/public/v1/goods/qsearch`, {
          query: res
        })
        if (data.meta.status !== 200) return uni.$errShowMes()
        this.searchList = data.message
        // 添加搜索记录
        const index = this.historyList.indexOf(res)
        if (index !== -1) {
          this.historyList.splice(index, 1)
        }
        this.historyList.unshift(res)
        uni.setStorageSync('historyList', JSON.stringify(this.historyList))
      } catch (error) {
        return error
      }
    }, 800),
    //搜索结果跳转商品详情页面
    goJump(content) {
      uni.navigateTo({
        url: `/subpkg/goods_detail/goods_detail?goods_id=${content.goods_id}`
      })
    },
    //搜素历史跳转商品列表
    goHistoryJump(content) {
      uni.navigateTo({
        url: '/subpkg/goods_list/goods_list?cid=' + content
      })
    },
    //清除所有历史记录
    clearHistory() {
      this.historyList = []
      uni.setStorageSync('historyList', '')
    }
  }
}
</script>

<style lang="scss">
.search-box {
  background-color: #22a6b3;
  position: sticky;
  top: 0;
  z-index: 999;
}

.search-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #bdc3c7;
  font-size: 14px;

  .search-list-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.history-title {
  display: flex;
  padding: 5px 7px;
  font-size: 15px;
  justify-content: space-between;
  border-bottom: 1px solid #bdc3c7;
}

.history-list {
  display: flex;
  flex-wrap: wrap;
  flex: 1;

  .history-list-tag {
    padding: 5px;
  }
}
</style>
